<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="flip-card title_square dropdown-menu__heade text-center"> <div class="flip-card-inner flipcard"> <div class="flip-card-front "> <b>D</b> </div> <div class="flip-card-back"> <b>15</b> </div> </div> </div> </div> </div> Credit : Pardeep Verma

.title_square { box-sizing: border-box; height: 40px; width: 40px; border: 0px; border-radius: 4px; color: #fff; font-size: 20px !important; margin-top: 15px; word-break: break-all; overflow: hidden; } .flipcard{ animation-name: flip; -webkit-animation-name: flip; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 8s; -webkit-animation-duration: 8s; -webkit-animation-delay: 4s; animation-delay: 4s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } @-webkit-keyframes flip { 0% { transform: rotateY(0deg); } 60% { transform: rotateY(0deg); } 60.1% { transform: rotateY(0deg); } 70% { transform: rotateY(90deg); } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } } @-moz-keyframes flip { 0% { transform: rotateY(0deg); } 60% { transform: rotateY(0deg); } 60.1% { transform: rotateY(0deg); } 70% { transform: rotateY(90deg); } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } } @-o-keyframes flip { 0% { transform: rotateY(0deg); } 60% { transform: rotateY(0deg); } 60.1% { transform: rotateY(0deg); } 70% { transform: rotateY(90deg); } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } } @keyframes flip { 0% { transform: rotateY(0deg); } 60% { transform: rotateY(0deg); } 60.1% { transform: rotateY(0deg); } 70% { transform: rotateY(90deg); } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 4px; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: #f8bf45; display: flex; align-items: center; border-radius: 4px; justify-content: center; } .flip-card-back { transform: rotateY(180deg); border-radius: 4px; }